<template>
  <div class="card-container">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div></div>
      <div style="width: 500px;">
        <el-input
          v-model="searchForm.keyword"
          placeholder="请输入商品关键词或商品链接搜索"
          style="width: 500px;"
          clearable
          size="large"
          class="search-input"
          @keyup.enter.native="goSearch"
        >
          <el-button
            slot="append"
            type="success"
            icon="el-icon-search"
            @click.native="goSearch"
          ></el-button>
        </el-input>
      </div>
      <div style="float: right;">
        <el-button slot="append" type="success" @click.native="opendia"
          >淘口令一键转换</el-button
        >
      </div>
    </div>
    <div class="search">
      <div class="search-sx">
        <span class="search-left-title">价格</span>
        <div class="search-right-content">
          <el-button
            size="mini"
            round
            :type="pricesBottonIndex === index ? 'primary' : 'text'"
            v-for="(x, index) in prices"
            :key="index"
            :class="pricesBottonIndex === index ? '' : 'search-price'"
            @click.native="clickPrice(index)"
          >
            {{ x.title }}
          </el-button>
          <div class="search-sx-input-list" style="margin-left: 50px;">
            <span class="search-sx-input-list-left">自定义：</span>
            <el-input
              size="small"
              clearable
              class="search-sx-input-list-content"
              v-model="searchForm.start_price"
            ></el-input>
            <span class="search-sx-input-list-left search-sx-input-list-right"
              >-</span
            >
            <el-input
              size="small"
              clearable
              class="search-sx-input-list-content"
              v-model="searchForm.end_price"
            ></el-input>
            <span class="search-sx-input-list-right">元</span>
            <el-button
              size="mini"
              class="search-sx-input-list-right"
              type="primary"
              style="color: #ffffff;"
              @click.native="customPrice"
              >确定</el-button
            >
          </div>
        </div>
      </div>
      <div class="search-sx">
        <span class="search-left-title">筛选</span>
        <div class="search-right-content">
          <div class="checkBox-test">
            <el-checkbox v-model="searchForm.is_tmall">天猫</el-checkbox>
            <el-checkbox v-model="searchForm.has_coupon">优惠券</el-checkbox>
            <el-checkbox v-model="searchForm.need_free_shipment"
              >包邮</el-checkbox
            >
            <el-checkbox v-model="searchForm.need_prepay"
              >消费者保障</el-checkbox
            >
            <el-checkbox v-model="searchForm.is_overseas">海淘</el-checkbox>
          </div>
          <div class="search-sx-input">
            <div class="search-sx-input-list">
              <span class="search-sx-input-list-left">佣金比率≥</span>
              <el-input
                size="small"
                clearable
                class="search-sx-input-list-content"
                v-model="searchForm.start_tk_rate"
              ></el-input>
              <span class="search-sx-input-list-right">%</span>
            </div>
            <div class="search-sx-input-list">
              <span class="search-sx-input-list-left">牛皮癣程度</span>
              <el-select
                v-model="searchForm.npx_level"
                class="search-sx-input-list-content"
              >
                <el-option label="不限" value="1"></el-option>
                <el-option label="无" value="2"></el-option>
                <el-option label="轻微" value="3"></el-option>
              </el-select>
            </div>
            <div class="search-sx-input-list">
              <span class="search-sx-input-list-left">店铺评分</span>
              <el-select
                v-model="searchForm.start_dsr"
                placeholder="请选择"
                class="search-sx-input-list-content"
              >
                <el-option label="不限" value=""></el-option>
                <el-option label="4.6" value="46000"></el-option>
                <el-option label="4.7" value="47000"></el-option>
                <el-option label="4.8" value="48000"></el-option>
                <el-option label="4.9" value="49000"></el-option>
                <el-option label="5.0" value="50000"></el-option>
              </el-select>
            </div>
            <div class="search-sx-input-list" v-if="checkPermission(['root'])">
              <span class="search-sx-input-list-left">团队管理</span>
              <el-input
                size="small"
                clearable
                class="search-sx-input-list-content"
                placeholder="管理名字"
                v-model="adminName"
                @keyup.enter.native="rootGetUnion"
              ></el-input>
            </div>
            <div
              class="search-sx-input-list"
              v-if="checkPermission(['admin', 'root']) && unionList.length > 0"
            >
              <span class="search-sx-input-list-left">联盟账号</span>
              <el-select
                v-model="unionForAdmin"
                placeholder="请选择"
                class="search-sx-input-list-content"
                @change="reChannelList"
              >
                <el-option
                  :label="name"
                  :value="name"
                  v-for="(name, index) in unionList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div
              class="search-sx-input-list"
              v-if="checkPermission(['admin', 'root']) && unionList.length > 0"
            >
              <span class="search-sx-input-list-left">媒体</span>
              <el-select
                v-model="channelForAdmin"
                placeholder="请选择使用的媒体"
                class="search-sx-input-list-content"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="(item, index) in channelList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div
              class="search-sx-input-list"
              v-if="checkPermission(['editor', 'admin'])"
            >
              <span class="search-sx-input-list-left">pid</span>
              <el-select
                v-model="searchForm.pid_id"
                placeholder="请选择使用的pid"
                class="search-sx-input-list-content"
              >
                <el-option
                  :label="item.session"
                  :value="item.parentId"
                  v-for="(item, index) in banglist"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <el-button
              size="mini"
              class="search-sx-input-list-button"
              type="primary"
              @click.native="searchShaixuan"
              >确定</el-button
            >
          </div>
        </div>
      </div>
      <div class="search-sort-list">
        <span
          class="search-sort"
          :class="searchForm.sort == '' ? 'sort-acitve' : ''"
          @click="searchSort('')"
          >综合排序</span
        >
        <span
          class="search-sort"
          :class="searchForm.sort == '1' ? 'sort-acitve' : ''"
          @click="searchSort(1)"
          >价格排序</span
        >
        <span
          class="search-sort"
          :class="searchForm.sort == '2' ? 'sort-acitve' : ''"
          @click="searchSort(2)"
          >佣金比率</span
        >
        <span
          class="search-sort"
          :class="searchForm.sort == '3' ? 'sort-acitve' : ''"
          @click="searchSort(3)"
          >累计推广</span
        >
        <span
          class="search-sort"
          :class="searchForm.sort == '4' ? 'sort-acitve' : ''"
          @click="searchSort(4)"
          >总支出佣金</span
        >
      </div>
    </div>
    <el-row :gutter="15" v-loading="loading">
      <el-col
        v-for="(item, index) in list"
        :key="index"
        :xs="24"
        :sm="6"
        :md="6"
        :lg="6"
        :xl="4"
        class="goods-info"
        :class="mouseHand === index ? 'goods-info-hand' : ''"
        :style="'height:' + (parseFloat(imgHeigth) + 195) + 'px;'"
        ref="cardStyle"
        :id="'test' + index"
      >
        <el-card
          shadow="hover"
          :body-style="{ padding: '0px' }"
          :data-id="index"
          @mouseenter.native="mouseOver"
          @mouseleave.native="mouseLeave"
          v-if="imgHeigth != 0"
        >
          <div class="goods-info">
            <a
              :href="'https://detail.tmall.com/item.htm?id=' + item.num_iid"
              :title="item.title"
              target="view_window"
            >
              <el-image
                :src="item.pict_url + '_310x310.jpg'"
                lazy
                class="goods-image"
                :style="'height: ' + imgHeigth + 'px;'"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </a>
            <div
              class="goods-tg"
              :style="
                'width: ' + (parseFloat(imgHeigth) - 10) + 'px;left: 4px;'
              "
              v-if="mouseHand === index"
            >
              <div
                class="fl"
                :style="'width: ' + (parseFloat(imgHeigth) - 11) / 2 + 'px;'"
              >
                <el-button
                  type="text"
                  style="color: #ffffff;"
                  @click.native="showTaolijin(item)"
                  >淘礼金推广</el-button
                >
              </div>
              <div
                class="fl"
                style="
                  width: 1px;
                  background-color: #dcdfe6;
                  vertical-align: middle;
                  height: 35px;
                "
              ></div>
              <div
                class="fl"
                :style="
                  'width: ' +
                  (parseFloat(imgHeigth) - 11) / 2 +
                  'px;cursor:pointer;'
                "
                @click="copyContent(item)"
              >
                <el-tooltip class="item" effect="dark" placement="right">
                  <div
                    slot="content"
                    style="line-height: 26px; max-width: 300px;"
                  >
                    {{ item.title }}
                    <br />
                    【在售价】
                    {{
                      item.coupon_amount && item.coupon_amount > 0
                        ? item.zk_final_price
                        : item.reserve_price
                    }}元
                    <br />
                    {{
                      item.coupon_amount > 0
                        ? "【券后价】 " +
                          parseFloat(
                            item.zk_final_price - item.coupon_amount
                          ).toFixed(2)
                        : "【优惠价】 " + item.zk_final_price
                    }}元
                    <br />
                    -----------------
                    <br />
                    【链接下单】点击进入{商品链接}淘宝领券并下单
                    <br />
                    【口令下单】复制{淘口令}打开手机淘宝立即下单
                    <br />
                  </div>
                  <el-button type="text" style="color: #ffffff;"
                    >普通推广</el-button
                  >
                </el-tooltip>
              </div>
            </div>
          </div>
          <div style="padding: 10px; height: 175px;">
            <a
              :href="'https://detail.tmall.com/item.htm?id=' + item.num_iid"
              :title="item.title"
              class="goods-title"
              target="view_window"
              >{{ item.title }}</a
            >
            <div style="height: 6px; margin: 10px auto;">
              <el-tooltip
                class="item"
                effect="dark"
                placement="right"
                v-if="item.coupon_amount && item.coupon_amount > 0"
              >
                <div slot="content" style="line-height: 26px;">
                  优惠券开始 {{ item.coupon_start_time }}
                  <br />
                  优惠券结束 {{ item.coupon_end_time }}
                  <br />
                  券总数 {{ item.coupon_total_count }} /剩余
                  {{ item.coupon_remain_count }}
                </div>
                <el-progress
                  :percentage="
                    percentage(
                      item.coupon_total_count,
                      item.coupon_remain_count
                    )
                  "
                  status="success"
                  :show-text="false"
                ></el-progress>
              </el-tooltip>
            </div>
            <div class="price clearfix">
              <div class="price-float-left">
                <div class="price-text" style="color: #db3a00;">
                  <span style="font-size: 13px;">￥</span>
                  {{
                    item.coupon_amount > 0
                      ? parseFloat(
                          item.zk_final_price - item.coupon_amount
                        ).toFixed(2)
                      : item.zk_final_price
                  }}
                </div>
                <div class="price-title">
                  {{ item.coupon_amount > 0 ? "券后价" : "优惠价" }}
                </div>
              </div>
              <div
                class="fl"
                style="
                  width: 1px;
                  background-color: #dcdfe6;
                  vertical-align: middle;
                  height: 55px;
                  vertical-align: middle;
                "
              ></div>
              <div class="price-float-left">
                <div
                  class="price-text"
                  style="color: #db3a00; line-height: 25px;"
                >
                  <span style="font-size: 12px;">￥</span>
                  {{
                    item.coupon_amount > 0
                      ? (
                          ((parseFloat(item.zk_final_price) -
                            parseFloat(item.coupon_amount)) /
                            10000) *
                          parseFloat(item.commission_rate) *
                          0.9
                        ).toFixed(2)
                      : (
                          (item.zk_final_price / 10000) *
                          parseFloat(item.commission_rate) *
                          0.9
                        ).toFixed(2)
                  }}
                  <div
                    style="font-size: 13px; color: #1b72a8; line-height: 15px;"
                  >
                    {{ (parseFloat(item.commission_rate) / 100).toFixed(2) }}%
                  </div>
                </div>
                <div class="price-title">预估佣金</div>
              </div>
            </div>
            <div class="bottom clearfix">
              <div class="fl">
                <div
                  class="bottom-coupon"
                  v-if="item.coupon_amount && item.coupon_amount > 0"
                >
                  <div class="bottom-coupon-tilte">券</div>
                  <div class="bottom-coupon-price">
                    {{ item.coupon_amount }}元
                  </div>
                </div>
              </div>
              <div class="fr">
                <img
                  src="https://gw.alicdn.com/tfs/TB13jKla21G3KVjSZFkXXaK4XXa-172-172.png"
                  style="width: 16px; height: 16px;"
                  v-if="item.user_type == '1'"
                />
              </div>
            </div>
            <div class="bottom clearfix">
              <div class="fl bottom-desc">月销 {{ item.volume }}</div>
              <div class="fr bottom-desc">{{ item.shop_title }}</div>
            </div>
          </div>
          <div
            style="padding: 10px;"
            class="clearfix"
            v-if="mouseHand === index"
          >
            <div class="bottom-desc">店铺dsr评分： {{ item.shop_dsr }}</div>
            <div class="bottom-desc">
              30天推广量：{{ item.tk_total_sales }}件
            </div>
            <div class="bottom-desc">
              30天支出佣金：{{ item.tk_total_commi }}元
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      :current-page="searchForm.pageNo"
      background
      :layout="layout"
      :total="total"
      @current-change="handleCurrentChange"
      v-if="list != null && list.length > 0"
    ></el-pagination>
    <taolijin
      ref="taolijin"
      :unionList="unionList"
      @msgEvent="taolijinLinkData"
    ></taolijin>
    <el-dialog
      title="淘礼金"
      :visible.sync="dialogVisible"
      width="40%"
      center
      :close-on-click-modal="closeModel"
    >
      <div style="margin-top: 15px;">
        <template slot="prepend">淘口令</template>
        <el-input v-model="taolijinTkl">
          <el-button
            slot="append"
            icon="el-icon-document-copy"
            @click.native="copyTaolijinTkl"
            >复制口令</el-button
          >
        </el-input>
      </div>
      <div style="margin-top: 15px;">
        <template slot="prepend">短链接</template>
        <el-input v-model="taolijinUrl">
          <el-button
            slot="append"
            icon="el-icon-document-copy"
            @click.native="copyTaolijinUrl"
            >复制链接</el-button
          >
        </el-input>
      </div>
      <div style="margin-top: 15px;">
        <template slot="prepend">快站链接</template>
        <el-input v-model="taolijinKzUrl">
          <el-button
            slot="append"
            icon="el-icon-document-copy"
            @click.native="copyTaolijinKzUrl"
            >复制链接</el-button
          >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="普通推广"
      :visible.sync="dialogVisibleText"
      width="40%"
      center
      :close-on-click-modal="closeModel"
    >
      <div style="margin-top: 15px;">
        <el-input
          type="textarea"
          :autosize="{ minRows: 15, maxRows: 50 }"
          v-model="copyTextContent"
        >
        </el-input>
      </div>
      <div style="margin-top: 15px;">
        <el-input
          placeholder="填写券之后点击重新生成即可"
          v-model="fanlicouponLink"
        >
          <template slot="prepend">券链接</template>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <!--el-input style="width: 50px;margin-right: 5px;" v-model="tpwdSymbol"></el-input>
        <el-button type="info" style="margin-right: 50px;" @click="setTpwdSymbol">设置符号</el-button-->
        <el-button type="primary" @click="dialogCopy">复制文案</el-button>
        <el-button type="primary" @click="reFanli">重新生成</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="一键礼金转换"
      :visible.sync="addShow"
      width="800px"
      center
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        label-width="120px"
        ref="AddForm"
        :rules="rules"
      >
        <el-form-item label="淘口令" prop="tkl"
          ><el-input
            v-model="addForm.tkl"
            autocomplete="off"
            placeholder="请填写淘口令"
          ></el-input
        ></el-form-item>
        <el-form-item label="佣金类型">
          <el-select v-model="addForm.setCampaignType">
            <el-option label="普通" value=""></el-option>
            <el-option label="定向计划" value="DX"></el-option>
            <el-option label="营销计划" value="MKT"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="券链接" prop="couponlink"
          ><el-input
            v-model="addForm.couponlink"
            autocomplete="off"
            placeholder="https://uland.taobao.com/quan/detail?sellerId=***&activityId=***"
          ></el-input
        ></el-form-item>
        <el-form-item label="淘礼金名称" prop="setName"
          ><el-input v-model="addForm.setName" autocomplete="off"></el-input
        ></el-form-item>

        <el-form-item label="总个数" prop="setTotalNum">
          <el-input-number
            v-model="addForm.setTotalNum"
            :min="1"
            :max="500000"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="单个金额" prop="setPerFace">
          <el-input-number
            v-model="addForm.setPerFace"
            :precision="2"
            :step="0.1"
            :min="1"
            :max="99999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="可领取次数" prop="setUserTotalWinNumLimit">
          <el-input-number
            v-model="addForm.setUserTotalWinNumLimit"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="领取时间" prop="setSendTime">
          <el-date-picker
            style="width: 100%;"
            v-model="addForm.setSendTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="领取开始日期"
            end-placeholder="领取结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="使用时间" prop="setUseTime">
          <el-date-picker
            style="width: 100%;"
            v-model="addForm.setUseTime"
            type="daterange"
            range-separator="至"
            start-placeholder="使用开始日期"
            end-placeholder="使用结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="saveCrontab">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import {
  listUnionName,
  listUnionChannel,
  listSearch,
  linkGoods,
  linkTaolijin,
  getPid,
  transformationLink,
} from "@/api/index";
import taolijin from "./components/taolijin";
export default {
  name: "Search",
  components: {
    taolijin,
  },
  data() {
    return {
      addShow: false,
      addForm: {
        pid: "",
        tkl: "",
        couponlink: "",
        setName: "",
        setTotalNum: "",
        setUserTotalWinNumLimit: "",
        setPerFace: "",
        setUseTime: [],
        setSendTime: [],
        setCampaignType: "",
        crontabTime: "",
        userName: "",
      },
      rules: {
        setName: [
          {
            required: true,
            message: "请输入淘礼金名称，不超过10个字",
            trigger: "blur",
          },
        ],
        tkl: [{ required: true, message: "请输入淘口令", trigger: "blur" }],
        couponlink: [
          { required: true, message: "请输入卷链接", trigger: "blur" },
        ],
        setTotalNum: [
          { required: true, message: "请输入生成数量", trigger: "blur" },
        ],
        setUserTotalWinNumLimit: [
          { required: true, message: "请输入可领取次数", trigger: "blur" },
        ],
        setPerFace: [
          { required: true, message: "请输入单个淘礼金金额", trigger: "blur" },
        ],
        setUseTime: [
          { required: true, message: "请输入使用时间", trigger: "change" },
        ],
        setSendTime: [
          { required: true, message: "请输入领取时间", trigger: "change" },
        ],
        crontabTime: [
          { required: true, message: "请输入计划生成时间", trigger: "change" },
        ],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
      },
      banglist: [],
      prices: [
        { title: "0-9元", start_price: 0, end_price: 9 },
        { title: "9-30元", start_price: 9, end_price: 31 },
        { title: "31-80元", start_price: 31, end_price: 80 },
        { title: "81-100元", start_price: 81, end_price: 100 },
        { title: "101-200元", start_price: 101, end_price: 200 },
        { title: "201-300元", start_price: 201, end_price: 300 },
        { title: "301-500元", start_price: 301, end_price: 500 },
        { title: "500元以上", start_price: 500, end_price: "" },
      ],
      pricesBottonIndex: -1,
      list: null,
      layout: "total, prev, pager, next, jumper",
      total: 0,
      imgHeigth: 0,
      mouseHand: -1,
      unionList: [],
      unionForAdmin: "",
      channelList: [],
      channelForAdmin: "",
      copyTextContent: "",
      tpwdSymbol: "",
      closeModel: false,
      searchForm: {
        keyword: "",
        pageNo: 1,
        start_price: "",
        end_price: "",
        is_tmall: false,
        is_overseas: false,
        need_prepay: false,
        need_free_shipment: false,
        has_coupon: false,
        npx_level: "1",
        start_tk_rate: "",
        end_tk_rate: "",
        start_dsr: "",
        sort: "",
        pid_id: "",
      },
      goodsInfo: {},
      loading: false,
      dialogVisible: false,
      taolijinTkl: "",
      taolijinUrl: "",
      taolijinKzUrl: "",
      dialogVisibleText: false,
      adminName: "",
      fanlicouponLink: "",
      reFanliLinkData: {},
      reGoodsInfo: {},
    };
  },
  created() {
    if (this.checkPermission(["admin"])) {
      listUnionName({}).then((res) => {
        if (res.code && res.code === 200) {
          this.unionList = res.data;
          if (res.data.length == 0) {
            this.$baseAlert(
              "必须先添加淘宝账号才能搜索",
              "请先添加账号",
              () => {
                this.$router.push("/admin/unionTaobao");
              }
            );
          }
        }
      });
    }
    if (this.checkPermission(["root"])) {
      this.searchForm.adminName = "";
    }
    this.tpwdSymbol = localStorage.getItem("TPWDSYMBOL");
    this.getPid();
  },
  mounted() {},
  methods: {
    saveCrontab() {
      this.$refs["AddForm"].validate((valid) => {
        if (valid) {
          this.addForm.pid = this.searchForm.pid_id;
          console.log(this.addForm.pid);
          let setData = this.addForm;

          transformationLink(setData).then((res) => {
            this.$baseMessage("一键转换成功!", "success");
            this.addShow = false;
          });
        }
      });
    },
    opendia() {
      if (this.searchForm.pid_id == "") {
        this.$baseMessage("请先选择pid再进行操作!", "info");
      } else {
        this.addShow = true;
      }
    },
    getPid() {
      getPid({ user_id: localStorage.getItem("userid") })
        .then((res) => {
          console.log("getpid", res);
          this.banglist = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reChannelList() {
      this.channelForAdmin = "";
      listUnionChannel({ unionName: this.unionForAdmin }).then((res) => {
        this.channelList = res.data.channel;
        // console.log("00", this.channelList);
        this.searchForm.pid_id = res.data.pid_id;
      });
    },
    rootGetUnion(e) {
      if (this.adminName.length < 1) {
        return this.$baseMessage("请输入正确的管理员名字，然后按回车", "error");
      }
      listUnionName({ username: this.adminName }).then((res) => {
        if (res.code && res.code === 200) {
          this.unionList = res.data;
          if (res.data.length == 0) {
            this.$baseAlert("该账号没有添加联盟账号", "请先添加账号", () => {});
          }
        }
      });
    },
    goSearch() {
      this.fetchData();
    },
    percentage(total, remain) {
      let percentage = (parseInt(remain) / parseInt(total)) * 100;
      return parseInt(percentage);
    },
    clickPrice(index) {
      this.pricesBottonIndex = index;
      let price = this.prices[index];
      this.searchForm.start_price = price.start_price;
      this.searchForm.end_price = price.end_price;
      this.fetchData();
    },
    customPrice() {
      this.pricesBottonIndex = -1;
      this.fetchData();
    },
    searchShaixuan() {
      this.fetchData();
    },
    searchSort(index) {
      this.searchForm.sort = index;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.fetchData();
    },
    fetchData() {
      if (this.checkPermission(["admin", "root"])) {
        if (this.unionForAdmin == "") {
          return this.$baseMessage(
            "由于您是管理员，必须选择需要搜索的联盟账号",
            "error"
          );
        } else {
          this.searchForm.name = this.unionForAdmin;
        }
        if (this.channelForAdmin == "") {
          return this.$baseMessage(
            "由于您是管理员，必须选择需要搜索的媒体",
            "error"
          );
        } else {
          this.searchForm.channel = this.channelForAdmin;
        }
      }
      this.loading = true;
      if (this.searchForm.pid_id == "") {
        return this.$baseMessage("请先选择pid,再进行下一步操作!", "error");
      } else {
        listSearch(this.searchForm).then((res) => {
          window.scrollTo(0, 0);
          this.list = res.data;
          this.total = res.totalCount;
          setTimeout(() => {
            this.loading = false;
            if (this.imgHeigth === 0) {
              let width = window.getComputedStyle(
                document.getElementById("test0")
              ).width;
              this.imgHeigth = (parseFloat(width) - 15).toFixed(2);
            }
          }, 500);
        });
      }
    },
    mouseOver(e) {
      this.mouseHand = parseInt(e.target.dataset.id);
    },
    mouseLeave(e) {
      this.mouseHand = -1;
    },
    showTaolijin(e) {
      this.goodsInfo = e;
      this.$refs["taolijin"].show(e);
    },
    copyContent(e) {
      let data = {};
      let that = this;
      if (e.coupon_share_url) {
        data.url = "https:" + e.coupon_share_url;
      } else {
        data.url = "https:" + e.url;
      }
      data.iid = e.item_id;
      data.pic = e.pict_url;
      if (this.checkPermission(["admin", "root"])) {
        if (this.unionForAdmin == "") {
          return this.$baseMessage(
            "由于您是管理员，必须选择需要搜索的联盟账号",
            "error"
          );
        } else {
          data.name = this.unionForAdmin;
        }
        if (this.channelForAdmin == "") {
          return this.$baseMessage(
            "由于您是管理员，必须选择需要搜索的联盟账号",
            "error"
          );
        } else {
          data.channel = this.channelForAdmin;
        }
      }
      this.fanlicouponLink = "";
      this.reFanliLinkData = data;
      this.reGoodsInfo = e;
      linkGoods(data).then((res) => {
        let price, afterPrice;
        if (e.coupon_amount && e.coupon_amount > 0) {
          price = e.zk_final_price;
          afterPrice =
            "【券后价】" +
            parseFloat(e.zk_final_price - e.coupon_amount).toFixed(2);
        } else {
          price = e.reserve_price;
          afterPrice = "【优惠价】 " + e.zk_final_price;
        }
        let copyData =
          e.title +
          "\n【在售价】" +
          price +
          "元\n" +
          afterPrice +
          "元\n-----------------\n\n【下单链接】" +
          res.data.url +
          "\n【下单链接】" +
          res.data.kuaizhanUrl +
          "\n\n【口令下单】复制本消息" +
          res.data.tkl +
          "打开手机淘宝立即下单";
        that.copyTextContent = copyData;
        that.dialogVisibleText = true;
      });
    },
    reFanli() {
      let that = this;
      if (that.fanlicouponLink != "") {
        that.reFanliLinkData.couponlink = that.fanlicouponLink;
      }
      let e = that.reGoodsInfo;
      linkGoods(that.reFanliLinkData).then((res) => {
        that.$baseMessage("重新生成成功", "success");
        let price, afterPrice;
        if (e.coupon_amount && e.coupon_amount > 0) {
          price = e.zk_final_price;
          afterPrice =
            "【券后价】" +
            parseFloat(e.zk_final_price - e.coupon_amount).toFixed(2);
        } else {
          price = e.reserve_price;
          afterPrice = "【优惠价】 " + e.zk_final_price;
        }
        let copyData =
          e.title +
          "\n【在售价】" +
          price +
          "元\n" +
          afterPrice +
          "元\n-----------------\n\n【下单链接】" +
          res.data.url +
          "\n【下单链接】" +
          res.data.kuaizhanUrl +
          "\n\n【口令下单】复制本消息" +
          res.data.tkl +
          "打开手机淘宝立即下单";
        that.copyTextContent = copyData;
        that.dialogVisibleText = true;
      });
    },
    dialogCopy() {
      let that = this;
      that.$copyText(that.copyTextContent).then(
        function (e) {
          that.$baseMessage("复制成功", "success");
        },
        function (e) {
          that.$baseMessage("复制失败", "error");
        }
      );
    },
    taolijinLinkData(e) {
      var pd = {};
      pd.setItemId = e.iid;
      pd.setTotalNum = e.num;
      pd.setName = e.name;
      pd.setUserTotalWinNumLimit = e.getnum;
      pd.setSecuritySwitch = true;
      pd.setPerFace = e.money;
      pd.setSendStartTime = dateFormat("YYYY-mm-dd HH:MM:SS", e.receivetime[0]);
      pd.setSendEndTime = dateFormat("YYYY-mm-dd HH:MM:SS", e.receivetime[1]);
      pd.setUseStartTime = dateFormat("YYYY-mm-dd", e.usetime[0]);
      pd.setUseEndTime = dateFormat("YYYY-mm-dd", e.usetime[1]);
      pd.setUseEndTimeMode = 2;
      pd.couponlink = e.couponlink;
      pd.pic = this.goodsInfo.pict_url;
      pd.title = e.title;
      pd.pid_id = this.searchForm.pid_id;
      if (e.uname) {
        pd.name = e.uname;
      }
      if (e.channel) {
        pd.channel = e.channel;
      }
      if (e.type != "") {
        pd.setCampaignType = e.type;
      }
      let that = this;
      linkTaolijin(pd).then((res) => {
        if (res.code && res.code === 200) {
          that.$refs["taolijin"].close();
          that.taolijinTkl = res.data.tkl;
          that.taolijinUrl = res.data.shortUrl;
          that.taolijinKzUrl = res.data.kuaizhanUrl;
          that.dialogVisible = true;
        }
      });
    },
    setTpwdSymbol() {
      localStorage.setItem("TPWDSYMBOL", this.tpwdSymbol);
      this.$baseMessage("口令符号设置为" + this.tpwdSymbol, "success");
    },
    copyTaolijinTkl() {
      let that = this;
      that.$copyText(that.taolijinTkl).then(
        function (e) {
          that.$baseMessage("淘礼金淘口令复制成功", "success");
        },
        function (e) {
          that.$baseMessage("淘礼金淘口令复制失败", "error");
        }
      );
    },
    copyTaolijinUrl() {
      let that = this;
      that.$copyText(that.taolijinUrl).then(
        function (e) {
          that.$baseMessage("淘礼金链接复制成功", "success");
        },
        function (e) {
          that.$baseMessage("淘礼金链接复制失败", "error");
        }
      );
    },
    copyTaolijinKzUrl() {
      let that = this;
      that.$copyText(that.taolijinKzUrl).then(
        function (e) {
          that.$baseMessage("淘礼金链接复制成功", "success");
        },
        function (e) {
          that.$baseMessage("淘礼金链接复制失败", "error");
        }
      );
    },
    checkPermission,
  },
};
function dateFormat(fmt, date) {
  let ret;
  const opt = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString(), // 秒
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(
        ret[1],
        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
      );
    }
  }
  return fmt;
}
</script>
<style lang="scss" scoped></style>
<style>
.search-input .el-input__inner {
  border: 1px solid #fe4800;
}
.el-input-group__append,
.el-input-group__prependcs {
  background-color: #fe4800;
  color: #ffffff;
  border: 1px solid #fe4800;
}
.goods-image {
  width: 100%;
  display: block;
}
.goods-title {
  font-size: 12px;
  color: #666;
  display: block;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.price-float-left {
  float: left;
  width: 49%;
  text-align: center;
}
.price-text {
  font-size: 18px;
  color: #333;
  font-weight: 700;
  line-height: 40px;
}
.price-title {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  line-height: 20px;
}
.price {
  height: 70px;
}
.bottom-coupon {
  height: 24px;
  border: 1px solid #fe4800;
  border-radius: 3px;
}
.bottom-coupon-tilte {
  height: 23px;
  width: 23px;
  line-height: 23px;
  text-align: center;
  color: #ffffff;
  float: left;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: linear-gradient(
    0deg,
    rgba(255, 75, 66, 1),
    rgba(255, 117, 60, 1)
  );
  font-size: 12px;
}
.bottom-coupon-price {
  text-align: center;
  line-height: 24px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  color: #fe4800;
  font-size: 13px;
}
.goods-info {
  position: relative;
}
.goods-info-hand {
  z-index: 1;
}
.bottom {
  height: 30px;
  line-height: 30px;
}
.bottom-desc {
  font-size: 12px;
  line-height: 20px;
  color: #999;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.goods-tg {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  height: 35px;
  line-height: 35px;
  background-color: rgba(255, 68, 0, 0.9);
  color: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.search {
  margin: 20px auto;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.search-sx {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f2f2f2;
}
.search-left-title {
  position: relative;
  min-width: 90px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #333;
  display: inline-block;
}
.search-right-content {
  padding: 0 16px;
}
.search-price {
  color: #333;
}
.search-price:hover {
  color: #5490ff;
}
.search-sx-input {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.search-sx-input-list {
  position: relative;
  margin-right: 32px;
  display: inline-flex;
  align-items: center;
}
.search-sx-input-list-button {
  position: relative;
  margin-left: 50px;
  display: inline-flex;
  align-items: center;
}
.search-sx-input-list-left {
  color: #333;
  margin-right: 6px;
}
.search-sx-input-list-content {
  width: 100px;
}
.search-sx-input-list-right {
  margin-left: 6px;
}
.search-sort-list {
  height: 51px;
  position: relative;
  margin-left: -1px;
}
.search-sort {
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0 50px;
  cursor: pointer;
  color: #9f9f9f;
  margin-top: 2px;
}
.sort-acitve {
  color: #fff !important;
  background: linear-gradient(
    0deg,
    rgba(77, 116, 255, 1),
    rgba(89, 158, 253, 1)
  );
}
</style>
